 {include file="public/head" /}
<meta charset="utf-8">
<style>
.search-input{margin:0 15px;}
</style>
<body>
	<nav class="breadcrumb">
		<span class="breadcrumb-item">用户管理</span> <span
			class="breadcrumb-item">用户列表</span>
	</nav>
	<div id="box" v-cloak>
		<form class="form-inline input-group-sm">
			<label for="email">手机号码</label> <input type="text" v-model="mobile" class="form-control search-input" placeholder="请输入用户手机号"> 
			<label for="pwd">推荐人</label><input type="text" v-model="tjuser" class="form-control search-input"placeholder="请输入推荐人编号">
			<label for="pwd">注册时间</label>
			<input type="date" class="form-control search-input" v-model="start_time" placeholder="请输入推荐人编号">至
			<input type="date" class="form-control search-input" v-model="end_time" placeholder="请输入推荐人编号">
			<button type="button" class="btn btn-primary btn-sm" @click="search()">查询</button>
		</form>
		<div class="table-box">
			<!-- 表格 -->
			<table class="table table-bordered table-sm">
				<tr>
					<th width="50px">#</th>
					<th>姓名</th>
					<th>编号</th>
					<th>手机号码</th>
					<th>推荐人</th>
					<th>推荐人手机</th>
					<th>状态</th>
					<th>交易状态</th>
					<th>注册时间</th>
					<th>操作</th>
				</tr>
				<template  v-if="list.data.length">
					<tr v-for="(item,key) in list.data">
						<td>{{key + 1}}</td>
						<td>{{item.real_name}}</td>
						<td>{{item.no}}</td>
						<td>{{item.mobile}}</td>
						<td>{{item.tjuser}}</td>
						<td>{{item.tj_mobile}}</td>
						<td>
							<span class="badge badge-success" v-if="item.state">正常</span>
							<span class="badge badge-danger" v-else>封号</span>
						</td>
						<td>
							<span class="badge badge-success" v-if="!item.is_lock">正常</span>
							<span class="badge badge-danger" v-else>锁定</span>
						</td>
						<td>{{item.create_time}}</td>
						<td style="width:150px;">
							<button class="btn btn-link btn-sm" @click="see(item.id)">查看</button>
							<button class="btn btn-link btn-sm">二级代理</button>
						</td>
					</tr>
				</template>
				
				<tr v-else>
					<td colspan="9" class="no-table">暂无数据</td>
				</tr>
			</table>
			<!-- 分页 -->
			<div class="page-box">
				<span>当前第{{list.current_page}}页/共{{list.last_page}}页</span>
				<button @click="page(1)">首页</button>
				<button @click="page(2)">上一页</button>
				<button @click="page(3)">下一页</button>
				<button @click="page(4)">尾页</button>
				<input v-model="list.current_page" type="number">
				<button @click="page(5)">跳转</button>
			</div>
		</div>
	</div>
</body>
<script>
	new Vue({
		el: "#box",
		data :{
			list : {
				data:[],
				current_page : 1,
				last_page : 1
			},
			mobile : '',
			tjuser : '',
			start_time : '',
			end_time : ''
		},
		mounted : function() {
			this.getData();
		},
		methods : {
			//查看会员信息
			see:function(id){
				layer.open({
				  	type: 2,
				  	area: ['100%', '100%'],
				  	fixed: false, //不固定
				  	maxmin: true,
				  	content: '{:url("userInfo")}?id='+id
				});
			},
			//跳转页码
			page:function(param){
				switch(param){
				case 1:
					if(this.list.current_page <= 1)return false;
					this.list.current_page = 1
					break;
				case 2:
					if(this.list.current_page <= 1)return false;
					this.list.current_page --;
					break;
				case 3:
					if(this.list.current_page >= this.list.last_page )return false;
					this.list.current_page ++;
					break;
				case 4:
					if(this.list.current_page >= this.list.last_page )return false;
					this.list.current_page = this.list.last_page;
					break;
				case 5:
					break;
				}
				this.getData();
			},
			//获取页面加载数据
			getData:function(){
				var that = this;
				ajax("{:url('User/index')}",{
					data:{page : this.list.current_page,mobile:this.mobile,tjuser:this.tjuser,start_time : this.start_time,end_time:this.end_time},
					success:function(res){
						that.list = res.msg;
						layer.closeAll('loading');
					}
				});
			},
			search:function(){
				this.list.current_page = 1;
				this.getData();
			}
		}
	});
</script>
</html>